<!--
 * @Description: 
 * @Author: chenju
 * @Date: 2022-03-22 17:08:41
 * @LastEditors: qingyang
 * @LastEditTime: 2023-07-26 16:05:19
-->
<template>
  <CDrawer v-model="dialogVisible" title="配置详情">
    <div class="edit-op-container" v-if="dialogVisible">
      <p class="config-title">{{ taskForm.configName }}</p>
      <div class="inner-list">
        <span>组织名称</span>
        <p>{{ empty(taskForm.organizationName) }}</p>
      </div>
      <div class="inner-list">
        <span>企业名称</span>
        <p>{{ empty(taskForm.companyName) }}</p>
      </div>
      <div class="inner-list">
        <span>发起人</span>
        <p>{{ empty(taskForm.creator) }}</p>
      </div>
      <div class="inner-list">
        <span>邮箱</span>
        <p>{{ empty(taskForm.creatorEmail) }}</p>
      </div>
      <div class="inner-list">
        <span>填报周期</span>
        <p>{{ taskForm.fillPeriod }}</p>
      </div>
      <div class="inner-list">
        <span>填报频次</span>
        <p>{{ fillFrequencyEnum[taskForm.fillFrequency as 'MONTH' | 'YEAR'] }}</p>
      </div>
      <div class="inner-list" style="display: block">
        <span>数据填报组织</span>
        <CTable
          :data-source="taskForm.fillOrganizationInfo"
          useDataSource
          :pagination="false"
          border
        >
          <vxe-column title="数据填报组织">
            <template #default="scope">
              <p v-ellTooltip>{{ scope.row.organizationName }}</p>
            </template>
          </vxe-column>
          <vxe-column title="关联监测计划">
            <template #default="scope">
              <p v-ellTooltip>{{ scope.row.inventoryName }}</p>
            </template>
          </vxe-column>
          <vxe-column title="数据审核人">
            <template #default="scope">
              <p v-ellTooltip>{{ scope.row.auditor }}</p>
            </template>
          </vxe-column>
        </CTable>
      </div>
    </div>
  </CDrawer>
</template>
<script lang="ts">
export default {
  name: 'ConfigDetail'
};
</script>
<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed, watch, reactive } from 'vue';
import { getConfigDetail } from '@/apis/eci/dataManagement/config';
import { CTable } from '@/components/CTable/index';
import { fillFrequencyEnum } from '@/constants/enum';
import { empty } from '@/utils/index';
import { CDrawer } from '@/components/CDrawer/index';

interface SelectFillTypeDialogProps {
  visible: boolean;
  configNo: string;
}
const props = withDefaults(defineProps<SelectFillTypeDialogProps>(), {});
const emit = defineEmits(['update:visible']);
const dialogVisible = computed<boolean>({
  get: () => {
    return props.visible;
  },
  set: val => {
    emit('update:visible', val);
  }
});
watch(
  () => props.configNo,
  val => {
    if (val) {
      getConfigDetail(val).then((res: any) => {
        taskForm.configName = res.configName;
        taskForm.organizationNo = res.organizationNo;
        taskForm.organizationName = res.organizationName;
        taskForm.companyName = res.companyName;
        taskForm.creator = res.creator;
        taskForm.creatorEmail = res.creatorEmail;
        taskForm.fillFrequency = res.fillFrequency;
        taskForm.fillPeriod = res.fillPeriod;
        taskForm.fillOrganizationInfo = res.fillOrganizationInfo;
      });
    }
  }
);

const taskForm = reactive({
  configName: '',
  organizationNo: '',
  organizationName: '',
  companyName: '',
  creator: '',
  creatorEmail: '',
  fillFrequency: '',
  fillPeriod: '',
  fillOrganizationInfo: [],
  auditorId: '',
  auditorName: '',
  taskDesc: ''
});
</script>
<style lang="scss" scoped>
.edit-op-container {
  padding: 19px 24px;
}
.config-title {
  height: 22px;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #0a1f33;
  line-height: 22px;
}

.inner-list {
  display: flex;
  line-height: 32px;
  span {
    width: 135px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7a8a99;
    height: 32px;
  }
  p {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #435970;
    line-height: 22px;
    margin: 9px 0 9px;
    flex: 1;
  }
  .check-tree {
    color: #115abf;
    cursor: pointer;
  }
}
</style>
<style>
.d-overlay {
  width: 600px !important;
  left: auto !important;
}
</style>
